<template>
    <div class="wapper">
    <div class="login-warpper">
        <div class="login-logo">
            <p>家庭医生后台管理系统</p>
            <img src="../../images/u1216.png" alt="">
        </div>
        <div class="login">
            <el-form :model="user" label-width="60px" class="login-user">
                <div class="login-box">
                    <img src="../../images/u455.jpg" alt="">
                    <h2>欢迎登陆</h2>
                </div>
                <el-form-item label="">
                    <el-input v-model="user.username" placeholder="请输入手机号码" style="width: 300px; height: 45px;"/>
                </el-form-item>
                <el-form-item label="">
                    <el-input type="password" show-password v-model="user.password"  placeholder="请输入密码" style="width: 300px; height: 45px;"/>
                </el-form-item>
                <input type="checkbox" ref="inputRef"><span>我已阅读并同意<span class="zhengce">《用户隐私政策》</span></span>
                <el-form-item>
                    <el-button type="primary" @click="handleLogin" style="width: 300px; height: 45px;margin-top: 10px;">登录</el-button>
                </el-form-item>
                <span style="font-size: 12px;">忘记密码请联系管理员</span>
            </el-form>
        </div>
    </div>
</div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus'
// import store from '../../store/user'
import useUserStore  from '../../store/user'
export default {
    name: 'login',
    data() {
    return {
        user:{
            username:'qinglong',
            password:'123'
        },
    }
  },
  methods:{
   async handleLogin(){
        const store = useUserStore()
        
        const isChecked = this.$refs.inputRef.checked
        console.log(isChecked);
        // 实习异步登录
        const loginResult = await store.loginAction(this.user)
        //  console.log(loginResult);
         if (loginResult && isChecked) { // 登录成功，跳转页面
            this.$router.push('/home')
        }
        else { // 失败，则提示错误
            ElMessage.error('用户名或密码错误!并请勾上用户隐私政策')
        }
        
       
    }
    },
}

</script>

<style lang="less" scoped>
.wapper{
    width: 100%;
    height: 100%;
    background-color: rgb(242,247,251);
.login-warpper {
    width: 1200px;
    height: 600px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 50%;
    margin-left: -600px;
    top: 50%;
    margin-top: -330px;

    .login-logo{
        padding-left: 20px;
        width: 50%;
        height: 100%;
        background-color: rgba(41,132,248);
        color: #fff;
        position: relative;
        img{
            position: absolute;
            left: 25%;
            top:25%
        }
    }
    .login{
        width: 50%;
        height: 100%;
        position: relative;
        border-radius: 10px;
        text-align: center;
        .login-box{
            img{
                width: 50px;
                height: 50px;
            }
        }
        span{
            font-size: 14px;
            color: #999;
            .zhengce{
                color: rgb(113, 174, 249);
                
            }
        }
        .login-user{
            position: absolute;
            left: 15%;
            top:20%
        } 
    }
}
}
</style>
